<template>
  <div>
    <Head></Head>
    <div class="main-body">
      <div class="main-left">
        <Main></Main>
        <Foot></Foot>
      </div>
      <div class="side">
        <Side></Side>
      </div>
    </div>
  </div>
</template>

<script>
// 导入组件（头部、主体、底部、侧边）
import Head from '../components/Head.vue';
import Main from '../components/Main.vue';
import Foot from './components/Foot.vue';
import Side from './components/Side.vue';
export default {
  name:'',
  components:{
    Head,
    Main,
    Foot,
    Side
  },
}
</script>

<style scoped>
.main-body{
  display: flex;
}
.main-left{
  margin-right: 20px;
  flex: 11;
}
.side{
  flex: 4.5;
  background-color: #042760;
}
</style>